<template>
  <div>
      <div class="navtexts"> 
        <div class="bianjisp">编辑商品</div>
        <div class="quanbuhei">全部好物<span>></span></div>
        <div class="jihuinavs cur" v-for="(item,index) in navtext" :key="index" :class="nastext == index ? 'redtext' : ''" @click="addnavtext(index)">{{item}}</div>
      </div>
      <div style="display:flex">
        <div>
    <div class="bjspinput">
      <div>
        <div class="leftbjspinput">
        <div class="zhutiinp">商品名称</div>
        <input type="text" v-model="form.title" />
      </div>
      <div class="leftbjspinput" style="margin-top:20px">
        <div class="zhutiinp">商品系列</div>
        <el-select v-model="form.catid" slot="prepend" placeholder="请选择" style="width: 350px;">
          <el-option label="骑行装备" value="骑行装备"></el-option>
          <el-option label="特别限定" value="特别限定"></el-option>
          <el-option label="优惠服务" value="优惠服务"></el-option>
        </el-select>
        <!-- <input type="text" v-model="form.catid" />
        <div class="rightjt cur" @click="addrightjt()">
          <img src="../assets/rightjt.png" alt="" class="jtimg" />
        </div> -->
      </div>
      </div>
    </div>

    <div class="uploadpic">
      <div class="leftuploadpic">
        <div class="redtoptext">商品主图</div>
        <div>
          <el-upload
            class="avatar-uploaderone"
            :action="`${api}/index.php/index/Adminapi/aliuploadfile`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'images' });
              }
            "
          >
            <img
              v-if="form.images"
              :src="HttpnewImg+form.images"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">图片尺寸：680X680px</div>
      </div>
      <!-- <div class="leftuploadpic">
        <div class="redtoptext">商品详情</div>
        <div>
          <el-upload
            class="avatar-uploaderfour"
            :action="`${api}/index.php/index/Adminapi/aliuploadfile`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'spxqimg' });
              }
            "
          >
            <img v-if="form.spxqimg" :src="HttpnewImg+form.spxqimg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">定宽：750px</div>
      </div> -->
      <div class="leftuploadpic">
        <div class="redtoptext">商品轮播</div>
        <div style="display: flex">
					<div style="display: flex; align-items: center">
            <div v-for="(image, index) in tplist" :key="index" style="margin:0 10px"> 
              <img :src="HttpnewImg+image" class="avatar" />
              <el-button type="text" @click="deleteImage(index)"
                >删除</el-button
              >
            </div>
          </div>
					<el-upload
            :key="form.lbimages"
						class="avatar-uploaderfive"
            :action="`${api}/index.php/index/Adminapi/aliuploadfile`"
            :show-file-list="false"
            :data="jm()"
            multiple
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
				</div>
      </div>
    </div>
    <div>
          <div class="leftbjspinputs">
            <div class="zhutiinp">库存数量</div>
            <input type="text" v-model="form.kucun" />
        </div>
        <div class="leftbjspinputs">
            <div class="zhutiinp">商品状态</div>
            <el-radio v-model="form.isshow" label="1">发布</el-radio>
            <el-radio v-model="form.isshow" label="2">隐藏</el-radio>
        </div>
    </div>
    <div class="leftbjspinputs">
            <div class="zhutiinp">首页显示</div>
            <el-radio v-model="form.isshowindex" label="1">显示</el-radio>
            <el-radio v-model="form.isshowindex" label="2">隐藏</el-radio>
    </div>
         </div>
        <div>
          <editor-wang
          style="width: 900px;"
            :value="form.content"
            @change="changeWang"
          ></editor-wang>
        </div>
      </div>

   <div style="display:flex">
      <div class="jifenjiazhi">
          <div class="zhutiinp">积分兑换</div>
          <input type="text" v-model="form.jfnum" />
      </div>
      <div class="jifenjiazhi">
          <div class="zhutiinp">商品价值</div>
          <input type="text" v-model="form.jiag" />
      </div>
   </div>

    <div style="display:flex">
      <div class="leftbjspinputs">
        <div class="zhutiinp">商品排序</div>
        <input type="text" v-model="form.sorts" />
      </div>
      <div style="display:flex;margin-left:300px;margin-top: 20px;">
        <div class="fabucj cur" @click="addRelease()">发布商品</div>
        <div class="quxfb cur" @click="addCance">取消发布</div>
      </div>
    </div>
  </div>
</template>
<script>
import { ElMessageBox, ElMessage } from "element-plus";
import editorWang from "../components/wangEnduit";
export default {
  components: {
    editorWang,
  },
  data() {
    return {
      HttpImg: "http://gyycadmincss.hansn.cn",
      HttpnewImg:"https://ckmco-video.oss-cn-shanghai.aliyuncs.com/",
      form: {
        spxqimg:'',//商品详情
        images:'', //商品主图
        title:'',//商品名称
        image:'',//轮播图片
        kucun:'',//商品库存
        jfnum:'',//积分兑换
        jiag:'', //商品价格
        sorts:null,//商品排序
        isshow:'1',
        isshowindex:'1',
      },
      ids:null,
      tplist:[],
      navtext:['骑行装备','节日限定','优惠服务'],
      xialalxList: ["概率抽奖", "机会抽奖", "活动抽奖"],
    };
  },
  mounted() {
    this.ids=this.$route.query.id
    if(this.ids){
      this.tplist=[];
      this.$http.post("index.php/index/Jf/jfcpshow", {id:this.ids}).then(res => {
        	if (res.code == 200) {
            const numishow = res.data[0].isshow
            const numishowindex = res.data[0].isshowindex
					this.form = res.data[0];
          this.form.isshow = numishow.toString()
          this.form.isshowindex = numishowindex.toString()
					let arr=res.data[0].lbimg;
					this.tplist=JSON.parse(arr);
				}
      })
    }
  },
  methods: {
    addrightjt() {},
    handleUploadSuccess(response, file, fileList) {
      // 处理上传成功的回调函数
      if(!this.tplist){
        this.tplist=[]
      }

      this.tplist.push(response.data);
      this.form.lbimg = this.tplist;

    },
    deleteImage(index) {
      ElMessageBox.confirm("是否确定删除?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tplist.splice(index, 1);

        this.form.lbimg.splice(index, 1);
      });
    },
    addRelease(){
      console.log(this.form.content,'aaaaaaaa');
      let data = {
				title: this.form.title,
				images: this.form.images,
				lbimg: JSON.stringify(this.tplist) || '',
				kucun: this.form.kucun,
				jfnum: this.form.jfnum,
				jiag: this.form.jiag,
				sorts: '1',
				spxqimg: this.form.spxqimg,
				catid: this.form.catid,
        isshow:this.form.isshow,
        isshowindex:this.form.isshowindex,
				alink:'',
        id: this.ids,
			}
      this.$http.post(this.ids ? "/index.php/index/Jf/jfcpupdate" : "/index.php/index/Jf/jfcpadd", data).then(res => {
				if (res.code == 200) {
					this.form={}
					this.id = ""
          this.$router.push('jifenduih')
					ElMessage({
						message: this.ids ? '编辑成功' : '新增成功',
						type: 'success',
					})
				}
			})
    },
    addCance(){
      this.$router.push('jifenduih')
    },
    changeWang(html) {
      this.form.content = html;
    },
  },
};
</script>
<style scoped>
.el-select .el-input .el-select__caret{
  font-size: 20px !important;
  color: red !important;
}
.el-radio__input.is-checked+.el-radio__label{
  color: #000 !important;
}
.el-radio__input.is-checked .el-radio__inner{
  background-color: #FF0000 !important;
}
.el-radio__label{
  font-size: 18px !important;
}
.el-radio__inner{
  width: 18px !important;
  height: 18px !important;
}
.bianjicj {
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 57px;
}
.bjsptitle {
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin-bottom: 12px;
}
.bjspinput {
  display: flex;
}
.leftbjspinput {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 540px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 81px;
}
.leftbjspinputs{
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  width: 540px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 81px;
}
.jifenjiazhi{
  display: flex;
  margin-bottom: 25px;
  width: 245px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 10px;
}
.jifenjiazhi input{
  width: 50px;
}
.zhutiinp {
  color: #ff0000;
  font-weight: 700;
  font-size: 18px;
  margin-right: 38px;
}
.rightjt {
  width: 10px;
  height: 16px;
}
.rightjt:hover img {
  transform: rotate(90deg);
}
.rightjt img {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

input {
  width: 375px;
  font-size: 18px;
  border: none;
  outline:none;
  background:none;
}
.editor{
  width: 400px;
  height: 400px;
}
.uploadpic {
  display: flex;
  margin-top: 47px;
  margin-bottom: 51px;
}
.leftuploadpic {
  margin-right: 50px;
}
.redtoptext {
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 7px;
}
.redtoptexts {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 7px;
}
.reai {
  width: 22px;
  height: 22px;
}
.reai img {
  width: 100%;
  height: 100%;
}
.imgsize {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
.avatar-uploaderone{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.avatar-uploaderfive{
  width: 200px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.avatar-uploaderfour{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #F6F6F6;
}

.fabucj{
  width: 114px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color:#FF0000;
}
.quxfb{
  width: 114px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color:#707070;
  margin-left: 22px;
}
.navtexts{
	display: flex;
	align-items: center;
  margin-bottom: 57px;
}
.bianjisp{
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-right: 32px;
}

.quanbuhei{
	font-size: 18px;
	font-weight: 400;
	color: #000;
}
.quanbuhei span{
	margin: 0 42px 0 16px;
	color: #FF0000;
}
.jihuinavs{
	margin-right: 29px;
	font-size: 18px;
	font-weight: 400;
}
</style>
